<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>后台管理系统 - demo</title>
    <link href="./css/common.css" rel="stylesheet">
</head>

<body data-logobg="default" data-sidebarbg="default" data-headerbg="default" data-theme="default">
    <div class="layout-container">
        <!--头部信息-->
        <header class="layout-header">
            <nav class="navbar navbar-default">
                <div class="topbar">
                    <div class="topbar-left">
                        <div class="aside-toggler">
                            <span class="toggler-bar"></span>
                            <span class="toggler-bar"></span>
                            <span class="toggler-bar"></span>
                        </div>
                        <span class="navbar-page-title"> 卡片布局 </span>
                    </div>
                    <ul class="topbar-right">
                        <li class="dropdown dropdown-profile">
                            <a href="javascript:void(0)" data-toggle="dropdown">
                                <img class="img-avatar img-avatar-36 m-r-10" src="images/users/avatar.jpg" alt="管理员" />
                                <span>管理员 <span class="caret"></span></span>
                            </a>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li> <a href="javascript:void(0)"><i class="mdi mdi-account"></i> 个人信息</a> </li>
                                <li> <a href="javascript:void(0)"><i class="mdi mdi-lock-outline"></i> 修改密码</a> </li>
                                <li> <a href="javascript:void(0)"><i class="mdi mdi-delete"></i> 清空缓存</a></li>
                                <li class="divider"></li>
                                <li> <a href="0_login02.html"><i class="mdi mdi-logout-variant"></i> 退出登录</a> </li>
                            </ul>
                        </li>

                    </ul>

                </div>
            </nav>

        </header>
        <!--End 头部信息-->

        <!--左侧导航-->
        <aside class="layout-sidebar">
            <!-- logo -->
            <div id="logo" class="sidebar-header">
                <a href="main.html"><img src="images/logo-sidebar.png" title="" alt="" /></a>
            </div>
            <div class="layout-sidebar-scroll">
                <nav class="sidebar-main">
                    <ul class="nav nav-drawer">
                        <li class="nav-item"> <a href="main.html"><i class="mdi mdi-home"></i> 欢迎页</a> </li>

                        <li class="nav-item nav-item-has-subnav active open">
                            <a href="javascript:void(0)"><i class="mdi mdi-palette"></i>示例元素+页面</a>
                            <ul class="nav nav-subnav">
                                <li> <a href="demo01.html">UI元素</a> </li>
                                <li class="active"> <a href="0_search.html">搜索框类型</a> </li>
                                <li> <a href="0_card.html">卡片布局</a> </li>
                                <li> <a href="0_table.html">表格布局</a> </li>
                            </ul>
                        </li>

                        <li class="nav-item nav-item-has-subnav">
                            <a href="javascript:void(0)"><i class="mdi mdi-menu"></i> 多级菜单示例</a>
                            <ul class="nav nav-subnav">
                                <li> <a href="#">一级菜单</a> </li>
                                <li class="nav-item nav-item-has-subnav">
                                    <a href="#">一级菜单</a>
                                    <ul class="nav nav-subnav">
                                        <li> <a href="#">二级菜单</a> </li>
                                        <li class="nav-item nav-item-has-subnav">
                                            <a href="#">二级菜单</a>
                                            <ul class="nav nav-subnav">
                                                <li> <a href="#">三级菜单</a> </li>
                                            </ul>
                                        </li>
                                    </ul>
                                </li>
                                <li> <a href="#">一级菜单</a> </li>
                            </ul>
                        </li>
                    </ul>
                </nav>

            </div>

        </aside>
        <!--End 左侧导航-->


        <!--页面主要内容-->
        <main class="layout-content">
            <div class="container-fluid p-tb-15">
                <div class="col-sm-12">
                    <div class="card qw-search">
                        <div class="card-header">
                            <h4>基本搜索框</h4>
                        </div>
                        <div class="card-body">
                            <select class="selectpicker">
                                <option>Mustard</option>
                                <option>Ketchup</option>
                                <option>Relish</option>
                          </select>
                        </div>
                    </div>
                    <div class="card qw-search">
                        <div class="card-header">
                            <h4>实时搜索</h4>
                        </div>
                        <div class="card-body">
                            <!-- 加属性 data-live-search="true" 和 关键字 data-tokens -->
                            <select class="selectpicker" data-live-search="true">
                                <option data-tokens="ketchup mustard">Hot Dog, Fries and a Soda</option>
                                <option data-tokens="mustard">Burger, Shake and a Smile</option>
                                <option data-tokens="frosting">Sugar, Spice and all things nice</option>
                              </select>
                        </div>
                    </div>
                    <div class="card qw-search">
                        <div class="card-header">
                            <h4>多个选择框</h4>
                        </div>
                        <div class="card-body">
                            <!-- 加属性 multiple -->
                            <select class="selectpicker" multiple>
                                <option>Mustard</option>
                                <option>Ketchup</option>
                                <option>Relish</option>
                          </select>
                        </div>
                    </div>
                    <div class="card qw-search">
                        <div class="card-header">
                            <h4>选择带有optgroups的框</h4>
                        </div>
                        <div class="card-body">
                            <select class="selectpicker">
                                <optgroup label="Picnic">
                                  <option>Mustard</option>
                                  <option>Ketchup</option>
                                  <option>Relish</option>
                                </optgroup>
                                <optgroup label="Camping">
                                  <option>Tent</option>
                                  <option>Flashlight</option>
                                  <option>Toilet Paper</option>
                                </optgroup>
                              </select>
                        </div>
                    </div>
                   
                </div>
            </div>

        </main>
        <!--End 页面主要内容-->
    </div>
</body>
<script type="text/javascript" src="js/commonJs.js"></script>

</html>